<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>19.table 模块快速使用</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
</head>
<body>

<table id="demo" lay-filter="test"></table>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delAll">删除选中行数据</button>
    </div>
</script>

<!--行内工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui-v2.7.6/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo' //绑定的元素
            ,height: 312  //表格高度，超出的话就会出现下拉框
            ,width:700
            ,url: 'http://localhost:8080/json/layui' //数据接口
            ,load:true
            //头部工具栏
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {  field: '',title: '选择', width:80, type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名', width:80,width: '30%'}
                ,{field: 'sex', title: '性别', width:80, sort: true,width: '30%'}
                //行内工具栏
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:'center'}
            ]]
            ,page: true,//开启分页
            limits: [10,15,20,30]//每页有多少条数据，可选择这四种
            , limit: 10  //优先级高于上面，默认每页10条数据
            //接口返回的json格式不符合layUI格式，此回调函数可以进行转换
            , parseData: function (res) {
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                //如果是第一次进入表格，默认进入第1页，否则按照当前页截取数据data
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                //将处理之后的json返回
                return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
            }
            ,  done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('一共有'+count+"条数据，当前是第"+ curr +"页");
                });
            }
            ,initSort: {
                field: 'id' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            ,  defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示' //标题
                ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                ,icon: 'layui-icon-tips' //图标类名
            }]
        });


        //触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'LAYTABLE_TIPS':
                    layer.msg('提示一下');
                    break;
            };
        });

    });

    //可以直接使用js代码将这个代码加进去，可以是在页面上写一个html标签，直接渲染
    // var dom = $("<div id='showalladdableavms' style='width:100%'><table id='demo' lay-filter='test'></table></div>");

    // $('body').append(dom)
</script>
</body>
</html>